import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './modules/user'

Vue.use(Vuex)

// vuex 插件：用于保存购物车中选购的商品数据到本地存储中（数据持久化）
const savePlugin = store => {
  // 添加对每次 mutation 调用后执行的任务的监听
  store.subscribe((mutation, state) => {
    // console.log('执行mutation:', mutation.type)
    switch (mutation.type) {
      // case '':// 将购物车商品保存到 localStorage 中（JSON.stringify()序列化）
      //   localStorage.setItem('cart', JSON.stringify(state.cart))
      //   break
      case 'SET_USERNAME':
        localStorage.setItem('username', mutation.payload)
        break
      case 'SET_AVATARURL':
        localStorage.setItem('avatarUrl', mutation.payload)
        break
      case 'SET_TOKEN':
        localStorage.setItem('token', mutation.payload)
        break
      default:
        localStorage.setItem('cart', JSON.stringify(state.cart))
    }
  })
}

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 在开发环境下开启严格模式，生产环境下关闭
  plugins: [savePlugin],
  state: { // 存的是应用中组件间需要共享的状态数据
    cart: JSON.parse(localStorage.getItem('cart')) || [] // 保存购物车商品数据
  },
  getters: { // computetd
    isAllChecked (state) {
      return state.cart.every(prod => prod.isChecked)
    },
    totalMoney (state) {
      return Math.floor(state.cart.reduce((sum, prod) => {
        if (prod.isChecked) {
          sum += prod.price * prod.amount
        }
        return sum
      }, 0) * 100)
    },
    // 计算购物车中商品总数量
    totalAmount (state) {
      return state.cart.reduce((sum, curr) => (sum += curr.amount), 0)
    }
  },
  mutations: { // mutation 是函数结构，用于同步更新状态
    /**
     * 添加购物车商品
     * @param state store 中 state 的引用
     * @param payload 有效载荷，payload 中保存添加到购物车中的商品对象
     */
    addToCart (state, payload) {
      // state.cart.push(payload)
      // 如果购物车数组中已有当前选购的商品，叠加数量即可
      const has = state.cart.some(prod => prod.id === payload.id)
      if (has) { // 存在，则叠加数量
        state.cart = state.cart.map(prod => {
          const copy = { ...prod }
          if (copy.id === payload.id) {
            copy.amount += payload.amount
          }
          return copy
        })
      } else { // 不存在，添加到数组中
        state.cart.push({
          ...payload,
          isChecked: true // 添加一个选中状态到当前选购商品的对象结构中
        })
      }
    },
    /**
     * 删除购物车中商品
     * @param id 待删除商品的 id
     */
    removeFromCart (state, id) {
      state.cart = state.cart.filter(prod => prod.id !== id)
    },
    /**
     * 修改数量
     * @param payload 对象 {id, amount}
     */
    changeAmount (state, { id, amount }) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        if (copy.id === id) {
          copy.amount = amount
        }
        return copy
      })
    },
    /**
     * 修改选中状态
     */
    toggleChecked (state, id) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        if (copy.id === id) {
          copy.isChecked = !copy.isChecked
        }
        return copy
      })
    },
    /**
     * 切换全选
     * @param preChecked 这是全选复选框点击前的选中状态
     */
    toggleCheckAll (state, preChecked) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        copy.isChecked = !preChecked
        return copy
      })
    }
  },
  actions: {},
  modules: {
    user: userModule
  }
})

export default store
